<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0" />
		<title>充值</title>
		<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
		<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
		<script>
			(function(WIN) {
				var setFontSize = (WIN.setFontSize = function(_width) {
					var docEl = document.documentElement;
					// 获取当前窗口的宽度
					var width = _width || docEl.clientWidth || docEl.getBoundingClientRect().width;

					if (width > 420) {
						width = 420;
					}
					// 在375px上，1rem = 20px
					var rem = width / 18.75;

					docEl.style.fontSize = rem + 'px';

					// // 部分机型上的误差、兼容性处理
					var actualSize =
						WIN.getComputedStyle && parseFloat(WIN.getComputedStyle(docEl)['font-size']);
					if (actualSize !== rem && actualSize > 0 && Math.abs(actualSize - rem) > 1) {
						var remScaled = (rem * rem) / actualSize;
						docEl.style.fontSize = rem + 'px';
					}
				});
				var timer;
				//函数节流
				function dbcRefresh() {
					clearTimeout(timer);
					timer = setTimeout(setFontSize, 100);
				}

				//窗口更新动态改变 font-size
				WIN.addEventListener('resize', dbcRefresh, false);
				//页面显示时计算一次
				WIN.addEventListener(
					'pageshow',
					function(e) {
						if (e.persisted) {
							dbcRefresh();
						}
					},
					false
				);
				setFontSize();
			})(window);
		</script>
		<style>
			@font-face {
				font-display: auto;
				font-family: 'DIN_Alternate_Bold';
				font-style: normal;
				font-weight: 400;
				src: local('DIN_Alternate_Bold'), url('./fonts/DIN_Alternate_Bold.ttf') format('ttf');
			}

			@media only screen and (min-width: 400px) {
				body {
					font-size: 21.33333333px !important;
				}
			}

			@media only screen and (min-width: 414px) {
				body {
					font-size: 21px !important;
				}
			}

			@media only screen and (min-width: 480px) {
				body {
					font-size: 25.6px !important;
				}
			}

			* {
				padding: 0;
				margin: 0;
			}

			#_index {
				height: 100vh;
				background-image: radial-gradient(200em circle at top right, rgb(31, 31, 61) 1%, rgb(10, 4, 24) 20%);
			}

			.head {
				padding: 20px 10px 0;
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}

			.nick_box {
				margin: 0 0 0 10px;
				color: #fff;
				font-size: 16px;
			}

			img {
				width: 60px;
				border-radius: 50%;
			}

			h4 {
				color: #fff !important;
			}

			.form {
				padding: 10px;
			}

			.infobox {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.info {
				color: rgba(255, 255, 255, 0.5);
				font-size: 15px;
			}

			.infobox input {
				height: 40px !important;
				width: -webkit-fill-available !important;
				padding: 0 0 0 0.3em !important;
				background: transparent;
				border: 1px solid rgb(55, 54, 82);
				border-radius: 5px;
				margin: 10px 0;
				background-color: rgb(31, 31, 61);
				color: rgba(255, 255, 255, 0.5);
			}

			.recharge input {
				height: 40px !important;
				width: -webkit-fill-available !important;
				padding: 0 0 0 0.3em !important;
				background: transparent;
				border: 1px solid rgb(55, 54, 82);
				border-radius: 5px;
				margin: 10px 0;
				background-color: rgb(31, 31, 61);
				color: rgba(255, 255, 255, 0.5);
			}

			.s_id {
				width: 20%;
				height: 40px;
				margin: 0 0 0 10px;
				background: linear-gradient(to right, rgb(201, 106, 251), rgb(150, 138, 245));
				color: #fff;
				border-radius: 5px;
				border: none;
			}

			#pay_id {
				width: -webkit-fill-available;
				height: 40px;
				margin: 0 0 0 10px;
				background: linear-gradient(to right, rgb(201, 106, 251), rgb(150, 138, 245));
				color: #fff;
				border-radius: 5px;
				border: none;
			}

			.checkout-list-item-inner {
				display: flex;
				align-items: center;
				float: left;
				pointer-events: none;
			}

			.checkout-payIcon {
				width: 1rem;
				height: 1rem;
				margin-right: 0.5rem;
			}

			.checkout-pay-title {
				margin-right: 0.5rem;
				font-size: 0.7rem;
				color: #ccc;
			}

			.checkout-list-item:nth-of-type(1) .checkout-recommend {
				display: block;
			}

			.checkout-radio {
				position: relative;
				display: block;
				width: 1rem;
				height: 1rem;
				padding: 0;
				border: 0.1rem solid #ccc;
				margin: 0;
				-webkit-appearance: none;
				background-color: #fff;
				-webkit-border-radius: 50%;
				border-radius: 50%;

				/* vertical-align: top; */
				cursor: default;
				float: right;
				font-size: 0.7rem;
				-webkit-transition: background-color ease 0.1s;
				transition: background-color ease 0.1s;
				-webkit-user-select: none;
				user-select: none;
				pointer-events: none;
			}

			.checkout-radio:checked,
			.checked-radio {
				border: solid 0.1rem var(--theme);
				background-color: var(--theme);
				text-align: center;
			}

			.checkout-radio:checked::before,
			.checkout-radio.checkout-checked::before,
			.checkout-radio:checked::after,
			.checkout-radio.checkout-checked::after,
			.checked-radio::before,
			.checked-radio::after {
				position: absolute;
				z-index: 2;
				top: 50%;
				left: 50%;
				width: 0.5rem;
				height: 0.3rem;
				border: 1px solid #fff;
				border-top: none;
				border-right: none;
				margin-top: -0.25rem;
				margin-left: -0.25rem;
				background: transparent;
				-webkit-border-radius: 0;
				border-radius: 0;
				content: '';
				-webkit-transform: rotate(-45deg);
				transform: rotate(-45deg);
			}

			.checkout-list-item {
				/* display: none; */
				overflow: hidden;
				padding: 0.85rem 0;
				border-bottom: 1px solid rgb(39, 38, 68);
				margin: 0 1rem 0 0;
			}

			.checkout-list-item-inner {
				display: flex;
				align-items: center;
				float: left;
				pointer-events: none;
			}

			.pay_btn {
				position: fixed;
				bottom: 20px;
				width: -webkit-fill-available;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<div id="_index">
			<!-- 头像信息 -->
			<div class="head">
				<img src="img/logo.png" id="img_header" />
				<div class="nick_box">
					<div style="display: flex;"><span>用户昵称：</span>
						<div id="nick">无</div>
					</div>
					<div style="display: flex;"><span>余额：</span>
						<div id="balance"></div>
					</div>
				</div>
			</div>

			<!-- 表单信息 -->
			<div class="form">
				<div class="userinfo">
					<div class="infobox">
						<h4 id="username">用户ID</h4>
						<span class="info">使用自己的账号充值</span>
					</div>
					<div class="infobox">
						<input id="userids inp" class="userids" type="text" value=""
							placeholder="请输入用户ID,为该用户充值" />
						<input id="uid inp" class="uid" style="display: none;" />
						<button id="s_id" class="s_id">查询</button>
					</div>
				</div>
				<div class="recharge">
					<div class="infobox">
						<h4>充值</h4>
					</div>
					<div class="infobox">
						<input id="num inp" class="num" type="number" placeholder="请输入充值金额" value="" min="1" max="10000" step="1" required />
						<button class="s_id" style="width: auto;padding: 0 20px;">元</button>
					</div>
					<div class="infobox" style="display: block !important;">
						<span id="diamond" class="info">0</span>&nbsp;<span class="info">钻石</span>
					</div>
				</div>
			</div>

			<!-- 支付 -->
			<div class="pay_btn">
				<div class="payType">
					<div class="infobox">
						<h4>支付方式</h4>
					</div>
					<ul class="checkout-list">
						<!-- <li class="checkout-list-item" id="alipayItem">
							<div class="checkout-list-item-inner">
								<img class="checkout-payIcon" src="img/alipay.png" />
								<span class="checkout-pay-title">支付宝</span>
							</div>
							<input style="--theme: #0B5AFE" class="checkout-radio" type="radio" name="radio"
								id="alipayInput" />
						</li> -->
						<li class="checkout-list-item" id="wxpayItem">
							<div class="checkout-list-item-inner">
								<img class="checkout-payIcon" src="img/wxpay.png" />
								<span class="checkout-pay-title">微信支付</span>
							</div>
							<input style="--theme: #0B5AFE" class="checkout-radio" type="radio" name="radio" checked
								id="wxpayInput" />
						</li>
					</ul>
				</div>
				<button id="pay_id" style="margin: 0;">支付</button>
			</div>
			<!-- 确认充值 -->
			<div id="dialog-confirm" title="确认充值信息" style="display:none;">
				<p>ID：<span id="userid" style="color: green;"></span></p>
				<p>昵称:<span id="usernick" style="color:green"></span></p>
				<p>金额:<span id="upcold" style="color:red"></span></p>
			</div>
			<!-- 提醒 -->
			<div id="dialog-message" title="提示" style="display:none;">
				<p id="message">
					没有用户信息
				</p>
			</div>
			<!-- error -->
			<div id="dialog-err" title="提示" style="display:none;">
				<p>
					后台错误，请稍后重试
				</p>
			</div>
		</div>
	</body>
	<!-- <script src="https://cdn.cloudpnr.com/opps/libs/jquery/jquery-2.1.2.min.js"></script> -->
	<script src="https://cdn.cloudpnr.com/opps/libs/vconsole/vconsole-3.4.0.min.js"></script>
	<script src="https://cdn.cloudpnr.com/opps/libs/axios/axios-0.21.1.min.js"></script>
	<script src="https://cdn.cloudpnr.com/opps/libs/fastclick/fastclick-1.0.6.min.js"></script>
	<script src="./monitor.js"></script>
	<script src="./config/index.js"></script>
	<script src="./http.js"></script>
	<script src="./util.js"></script>
	<script type="text/javascript">
		// 默认参数
		var payType = 0

		$(document).ready(function() {
			console.log(service)
		})
		// 查询用户信息
		$('#s_id').click(function() {
			var request = () => {
				return service({
					url: "/user/mineById",
					method: "get",
					params: {
						ErbanNo: $("input.userids").val()
					}
				})
			}
			request().then((res) => {
				$("#img_header").attr('src', res.data.avatar)
				$("#nick").text(res.data.nick)
				$("#balance").text(res.data.goldNum)
				$("#userid").text(res.data.erbanNo)
				$("input.uid").val(res.data.uid)
				$("#usernick").text(res.data.nick)
			})
		});
		// 拉起支付
		$('#pay_id').click(function() {
			let val = Number($("input.num").val())
			if(!Number.isInteger(Number(val))){
				$("#message").text("充值金额必须是整数")
				$("#dialog-message").dialog({
					modal: true,
					buttons: {
						Ok: function() {
							$(this).dialog("close");
						}
					}
				});
				return false
			}
			if ($("#balance").text() == "") {
				$("#dialog-message").dialog({
					modal: true,
					buttons: {
						Ok: function() {
							$(this).dialog("close");
						}
					}
				});
				return
			} else {
				$('#dialog-confirm').dialog({
					resizable: false,
					height: "auto",
					width: 400,
					modal: true,
					buttons: {
						"确认": function() {
							topay()
						},
						"取消": function() {
							console.log('User canceled!');
							// 执行取消后的操作
							$(this).dialog("close");
						}
					}
				});
			}
		});

		function topay() {
			var request = () => {

				//alipay,wxpay,,qqpay,bank
				return service({
					url: "/charge/h5/submit",
					method: "post",
					params: {
						type: "wxpay",
						name: "钻石礼包",
						money: $("input.num").val(),
						uid: $("input.uid").val(),
						returnUrl: "http://www.pay.com/return_url.php"
					}
				})
			}
			request().then((res) => {
				console.log(res, "payidres")
				if (res.code == 200) {
					window.location.href = res.data
				} else {
					$("#dialog-err").dialog({
						modal: true,
						buttons: {
							Ok: function() {
								$(this).dialog("close");
							}
						}
					});
				}
			})
		}

		$(".checkout-list-item").click(function(e) {
			let ids = e.currentTarget.id
			if (ids == "alipayItem") {
				$("#alipayInput").prop("checked", true)
				payType = 1
			}

			if (ids == "wxpayItem") {
				$("#wxpayInput").prop("checked", true)
				payType = 2
			}
		})
		$("#userids").focus(function() {
			console.log("inin")
			$("#userids").text('')
		})
		$("input.num").on('input', function() {
			let val = $("input.num").val();
			$("#diamond").text(val * 10)
			$("#upcold").text(val)
		});
	</script>
</html>